<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" size="xl" title="用户详情" scrollable hide-footer no-close-on-backdrop centered>
        <div class="d-block text-center">
            <!--begin::Form-->
            <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" method="post">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</label>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group input-group">
                                <input class="form-control" type="text" disabled maxlength="32"
                                    v-model="userInfoForm.departInfoName" placeholder="请选择">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</label>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group input-group">
                                <input type="hidden" maxlength="32" v-model="userInfoForm.postId">
                                <input class="form-control" type="text" disabled maxlength="32"
                                    v-model="userInfoForm.postName" placeholder="请选择">
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="64" style="width: 150px;"
                                v-model="userInfoForm.name" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                        </div>
                        <div class="col-md-2">
                            <el-select style="width: 150px;" disabled v-model="userInfoForm.sex">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in genderList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">出生年月</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker v-model="userInfoForm.birthday" type="date" disabled align="left"
                                style="width:150px" placeholder="选择出生年月" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" style="width: 150px;" maxlength="30"
                                v-model="userInfoForm.name" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">婚姻状况</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" disabled style="width: 150px;" v-model="userInfoForm.isMarried"
                                placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in marriedList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">身份证号</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="20"
                                v-model="userInfoForm.idCard" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" disabled v-model="userInfoForm.nation" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in nationList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="20"
                                v-model="userInfoForm.nativePlace" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">毕业学校</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="64"
                                v-model="userInfoForm.schoolName" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">联系电话</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="30" v-model="userInfoForm.phone"
                                placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">移动电话</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" disabled type="text" maxlength="20"
                                v-model="userInfoForm.mobile" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                        </div>
                        <div class="col-md-8">
                            <textarea class="form-control" disabled rows="2" maxlength="200"
                                v-model="userInfoForm.remark" placeholder="请输入"></textarea>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" disabled type="text" maxlength="255"
                                v-model="userInfoForm.address" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">入职时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker align="left" style="width:150px" type="date" disabled
                                v-model="userInfoForm.inTime" placeholder="选择日期" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">离职时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker v-model="userInfoForm.outTime" align="left" disabled style="width:150px"
                                type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">到期时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker v-model="userInfoForm.contractTime" align="left" style="width:150px"
                                type="date" disabled placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">QQ号码</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="12" disabled style="width: 150px;"
                                v-model="userInfoForm.qq" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">电子邮件</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="50" disabled style="width: 150px;"
                                v-model="userInfoForm.email" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" style="width: 150px;" disabled v-model="userInfoForm.state"
                                placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in stateList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label">政治面貌</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="32" disabled style="width: 150px;"
                                v-model="userInfoForm.political" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">文化程度</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" style="width: 150px;" disabled
                                v-model="userInfoForm.highestDegree" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in highestDegreeList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label">工作年限</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" style="width: 150px;" disabled v-model="userInfoForm.workYear"
                                placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option v-for="item in workYearList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-1 col-form-label">创&nbsp;&nbsp;建&nbsp;&nbsp;人</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="32" disabled v-model="userInfoForm.createBy" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-1 col-form-label">创建日期</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="32" disabled v-model="userInfoForm.createTime" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-1 col-form-label">修&nbsp;&nbsp;改&nbsp;&nbsp;人</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="32" disabled v-model="userInfoForm.modifiedBy" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-1 col-form-label">修改日期</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="32" disabled v-model="userInfoForm.updateTime" placeholder="请输入">
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                        <div class="form-group m-form__group row">
                            <div class="col m--align-left">
                                <!-- <button type="button" class="btn btn-light-primary font-weight-bold mr-2 m-btn m-btn--custom m-btn--icon" onclick="addSysUserInfo()">保存</button>
                                <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" block @click="hideModal">取消</button> -->
                            </div>
                            <div class="col m--align-right">
                                <!-- <a href="javascript:resetAll('defaultForm')" class="btn btn-secondary m-btn m-btn--custom m-btn--icon">
                                    <span><i class="fa fa-repeat"></i><span>重置</span></span>
                                </a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--end::Form-->
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
        </template>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
export default {
    data() {
        return {
            stateList: [],
            marriedList: [],
            highestDegreeList: [],
            workYearList: [],
            nationList: [],
            genderList: [],
            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                },
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                },
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            userInfoForm: {
                name: "",
                account: "",
                departInfoId: "",
                departInfoName: "",
                postId: "",
                postName: "",
                sex: "",
                birthday: "",
                isMarried: "",
                idCard: "",
                nation: "",
                nativePlace: "",
                schoolName: "",
                phone: "",
                mobile: "",
                remark: "",
                address: "",
                inTime: "",
                outTime: "",
                contractTime: "",
                qq: "",
                email: "",
                state: "",
                political: "",
                highestDegree: "",
                workYear: "",                             
                createBy:"",
                createTime:"",
                modifiedBy:"",
                updateTime:"",
            }
        }
    },
    mounted() {
    },
    methods: {
        showModal(id) {
            this.restForm();
            this.$refs['my-modal'].show();
            this.initGender();
            this.initNation();
            this.initHighestDegree();
            this.initWorkYear();
            this.initState();
            this.initMarried();
            this.getUserInfoDetail(id);
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        restForm() {
            //重置
            Object.assign(this.$data.userInfoForm, this.$options.data().userInfoForm);
        },
        getUserInfoDetail(id) {
            apiUtil.get(process.env.VUE_APP_SYS_API + "/sysUserInfo/get/" + id).then(({ data }) => {
                this.userInfoForm = data.data;
            });
        },
        initGender() {//加载性别
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/gender", params).then(({ data }) => {
                this.genderList = data.data;
            });
        },
        initNation() {//加载名族
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/xt_userinfo_nation", params).then(({ data }) => {
                this.nationList = data.data;
            });
        },
        initHighestDegree() {//加载文化程度数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/xt_userinfo_highestDegree", params).then(({ data }) => {
                this.highestDegreeList = data.data;
            });
        },
        initWorkYear() {//加载工作年限数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/xt_userinfo_workYear", params).then(({ data }) => {
                this.workYearList = data.data;
            });
        },
        initState() {//加载状态数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/xt_userinfo_state", params).then(({ data }) => {
                this.stateList = data.data;
            });
        },
        initMarried() {//加载是否已婚数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/sysCommon/sysDataDictionary/list/xt_userinfo_ismarried", params).then(({ data }) => {
                this.marriedList = data.data;
            });
        }
    }
}
</script>